<template>
  <div class="app-container">
    <div class="app-container-inner">
      <!-- 按钮组 & 搜索条件 -->
      <div class="header">
        <div class="btn_group">
          <!-- <HPlainButton @click="addEmp">新增工程师</HPlainButton> -->
          <HPlainButton @click="inImportExcel">导入工单</HPlainButton>
          <HButton :disabled="ids.length == 0" @click="handleChangeAll">批量删除</HButton>
        </div>

        <!-- 搜索条件 -->
        <div class="search">
          <el-input
            v-model.trim="search.code"
            clearable
            placeholder="工单单号"
            class="keyword_input"
            @keyup.enter="requestListApi"
            @clear="requestListApi"
          />
          <el-input
            v-model.trim="search.networkCode"
            clearable
            placeholder="网点编号"
            class="keyword_input"
            @keyup.enter="requestListApi"
            @clear="requestListApi"
          />
          <el-input
            v-model.trim="search.snCode"
            clearable
            placeholder="条码(条码)"
            class="keyword_input"
            @keyup.enter="requestListApi"
            @clear="requestListApi"
          />
          <el-input
            v-model.trim="search.userPhone"
            maxlength="11"
            clearable
            placeholder="公司手机号"
            class="keyword_input"
            @input.async="search.userPhone = search.userPhone.replace(/\D/g, '')"
            @keyup.enter="requestListApi"
            @clear="requestListApi"
          />
          <HButton type="primary" @click="requestListApi">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </HButton>
          <HButton @click="clearValue">
            <el-icon>
              <RefreshRight />
            </el-icon>
            重置
          </HButton>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="table">
        <el-table
          v-loading="loading"
          :border="true"
          :data="historyList"
          style="position: absolute; height: 100%"
          element-loading-text="加载中..."
          height="100%"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <!--选择-->
          <el-table-column type="selection" width="40" fixed="left" :align="'center'" />
          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="50" :align="'center'" fixed="left" />
          <el-table-column
            show-overflow-tooltip
            label="工单单号"
            prop=""
            :align="'center'"
            fixed="left"
            width="180"
          >
            <template #default="i">
              <HLink @click="goDetail(i.row)">
                {{ i.row.code }}
              </HLink>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="创建人" prop="createEmp" width="100" />
          <el-table-column
            show-overflow-tooltip
            label="报单时间"
            prop="orderCreateTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="工单状态" prop="status" width="100">
            <template #default="i">
              <HStatus
                :type="
                  i.row.status == 1 || i.row.status == 7 || i.row.status == 2
                    ? 'warning'
                    : i.row.status == 3
                    ? 'info'
                    : i.row.status == 4
                    ? 'success'
                    : i.row.status == 5
                    ? 'success'
                    : 'primary'
                "
              >
                {{ status[i.row.status - 1] }}</HStatus
              >
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="工单来源" prop="source" width="140" />
          <el-table-column show-overflow-tooltip label="工单类型" prop="orderType" width="120" />
          <el-table-column show-overflow-tooltip label="公司姓名" prop="username" width="100" />
          <el-table-column show-overflow-tooltip label="公司手机号" prop="phone" width="120" />
          <el-table-column show-overflow-tooltip label="公司报单地址" prop="" width="130">
            <template #default="i">
              {{ i.row.province + i.row.city + i.row.area + i.row.address }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="产品购买时间"
            prop="goodsBuyTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="购买商场" prop="buyMarket" width="130" />
          <el-table-column show-overflow-tooltip label="产品编号" prop="goodsCode" width="130" />
          <el-table-column show-overflow-tooltip label="产品型号" prop="goodsModel" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="产品规格"
            prop="goodsSpecName"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="数量"
            :align="'right'"
            prop="qtyStr"
            width="90"
          />
          <el-table-column
            show-overflow-tooltip
            label="公司故障描述"
            prop="faultDesc"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="故障现象条码"
            prop="faultPhenomenonCode"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="故障现象"
            prop="faultPhenomenon"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="故障原因条码"
            prop="faultReasonCode"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="故障原因" prop="faultReason" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="维修措施"
            prop="maintenanceMeasures"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="调度状态"
            prop="dispatchStatus"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="调度人" prop="dispatchEmp" width="130" />
          <el-table-column show-overflow-tooltip label="网点编号" prop="networkCode" width="130" />
          <el-table-column show-overflow-tooltip label="网点名称" prop="network" width="130" />
          <el-table-column show-overflow-tooltip label="网点手机" prop="networkPhone" width="130" />
          <el-table-column
            show-overflow-tooltip
            :align="'right'"
            label="网点最终结算"
            prop="networkEndSettlement"
            width="130"
          >
            <template #default="i">
              ￥{{ Number(i.row.networkEndSettlement).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :align="'right'"
            label="网点服务费"
            prop="networkServiceFee"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.networkServiceFee).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :align="'right'"
            label="网点调整金额"
            prop="networkAdjustFee"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.networkAdjustFee).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="网点调整原因"
            prop="networkAdjustReason"
            width="130"
          />

          <el-table-column
            show-overflow-tooltip
            label="网点申请金额"
            :align="'right'"
            prop="networkApplyFee"
            width="130"
          >
            <template #default="i">
              ￥{{ Number(i.row.networkApplyFee || 0).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="网点申请原因"
            prop="networkApplyReason"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="远程公里数"
            prop="remoteMileage"
            width="130"
          />
          <el-table-column
            :align="'right'"
            show-overflow-tooltip
            label="远程费"
            prop="remoteFee"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.remoteFee).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            :align="'right'"
            show-overflow-tooltip
            label="物料申请金额"
            prop="applySpareFee"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.applySpareFee).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :align="'right'"
            label="物料核准金额"
            prop="spareApprovalFee"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.spareApprovalFee).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            :align="'right'"
            show-overflow-tooltip
            label="单价"
            prop="price"
            width="130"
          >
            <template #default="i"> ￥{{ Number(i.row.price).toFixed(2) }} </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="承接时间"
            prop="undertakingTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="是否确认接单"
            prop="sureReceivingOrder"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="确认接单时间"
            prop="sureReceivingOrderTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="预约人" prop="reservationEmp" width="110" />
          <el-table-column
            show-overflow-tooltip
            label="首次预约时间"
            prop="firstReservationTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="首次预约操作时间"
            prop="firstReservationOperateTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="预约时间"
            prop="reservationTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="预约操作时间"
            prop="reservationOperateTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="完工时间" prop="endOrderTime" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="第一次完工时间"
            prop="firstEndOrderTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="完工类型" prop="endOrderType" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="完工备注"
            prop="endOrderRemark"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="完工确认人"
            prop="endOrderSureEmp"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="完工确认时间"
            prop="endOrderSureTime"
            width="130"
          />
          <el-table-column show-overflow-tooltip label="取消人" prop="cancelEmp" width="130" />
          <el-table-column show-overflow-tooltip label="取消时间" prop="cancelTime" width="130" />
          <el-table-column show-overflow-tooltip label="取消备注" prop="cancelRemark" width="130" />
          <el-table-column show-overflow-tooltip label="服务工程师" prop="engineer" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="外部系统传单标识"
            prop="outSystemOrderNo"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="外部系统传单返回信息"
            prop="outSystemOrderReturnInfo"
            width="150"
          />
          <el-table-column show-overflow-tooltip label="工单备注" prop="orderRemark" width="130" />
          <el-table-column show-overflow-tooltip label="旺旺号" prop="wangwangNumber" width="130" />
          <el-table-column show-overflow-tooltip label="是否核销" prop="writeOff" width="130" />
          <el-table-column
            show-overflow-tooltip
            label="录单条码"
            prop="recordBarcode"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="完工条码"
            prop="endOrderBarcode"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="审核不通过原因"
            prop="checkNotPassReason"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="最新跟进时间"
            prop="lastFollowUpTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="回访满意度"
            prop="followUpSatisfactionLevel"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="中心审核时间"
            prop="centerCheckTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易回访状态"
            prop="simpleFollowUpStatus"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易总体满意情况"
            prop="simpleOverallSatisfactionLevel"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易回访情况"
            prop="simpleOverallSatisfaction;"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易回访失败原因"
            prop="simpleFollowUpFailReason"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易回访时间"
            prop="simpleFollowUpTime"
            width="130"
          />
          <el-table-column
            show-overflow-tooltip
            label="简易回访备注"
            prop="simpleFollowUpRemark"
            width="130"
          />
        </el-table>
      </div>
      <div class="pagination">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="requestListApi()"
          @current-change="requestListApi(false)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="emp">
  import { ref, onMounted } from 'vue'
  import Pagination from '@/components/Pagination/index.vue'
  import { useRouter } from 'vue-router'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { getHistoryOrderList, deleteHistoryOrder } from '@/api/order'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.order.historyOrderList,
  })

  const router = useRouter()
  const status = ['承接', '发布', '取消', '确认完工', '网点完工', '已结算', '登记']
  // 动画加载
  const loading = ref(false)

  // 服务人员列表总数量
  const total = ref(0)
  const inImportExcel = () => {
    router.push({ path: '/order/orderhistoryExcelImport' })
  }
  // 列表
  const historyList = ref([])

  const pagination = ref()

  // 搜索对象
  const search = ref({
    code: '',
    limit: 0,
    networkCode: '',
    page: 0,
    snCode: '',
    userPhone: '',
  })

  // 获取列表
  const requestListApi = async (val = true) => {
    loading.value = true
    if (val && pagination.value) {
      pagination.value?.setPage()
    }
    search.value.code = search.value.code.trim()
    search.value.networkCode = search.value.networkCode.trim()
    search.value.snCode = search.value.snCode.trim()
    search.value.userPhone = search.value.userPhone.trim()
    ;(search.value.limit = pagination.value ? pagination.value.size : 50),
      (search.value.page = pagination.value ? pagination.value.current : 1),
      await getHistoryOrderList(search.value).then((res) => {
        loading.value = false
        if (res.data.code == 20000) {
          historyList.value = res.data.data.rows
          total.value = Number(res.data.data.total)
        } else {
          ElMessage({
            showClose: true,
            message: res.data.message,
            type: 'error',
            duration: 2000,
            plain: true,
          })
        }
      })
  }
  const ids = ref([])
  // 表格多选事件
  const handleSelectionChange = (arr: any[]) => {
    ids.value = []
    arr.filter((o) => {
      ids.value.push(o.id)
    })
  }
  // 批量修改状态事件
  const handleChangeAll = () => {
    if (ids.value.length == 0) {
      ElMessage({
        message: `请选择要删除的历史工单`,
        type: 'warning',
        duration: 5000,
        showClose: true,
        plain: true,
      })
      return
    }
    ElMessageBox({
      title: '提示',
      message: `确定删除该历史工单?`,
      showCancelButton: true,
      closeOnClickModal: false,
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
    }).then(async () => {
      const res = await deleteHistoryOrder(ids.value)
      if (res.data.code == 20000) {
        ids.value = []
        search.value = {
          code: '',
          limit: 50,
          networkCode: '',
          page: 1,
          snCode: '',
          userPhone: '',
        }
        ElMessage({
          type: 'success',
          message: res.data.message,
          duration: 3000,
          showClose: true,
          plain: true,
        })
        requestListApi()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
          duration: 3000,
          showClose: true,
          plain: true,
        })
      }
    })
  }

  // 清空搜索条件
  const clearValue = () => {
    search.value = {
      code: '',
      limit: 50,
      networkCode: '',
      page: 1,
      snCode: '',
      userPhone: '',
    }
    requestListApi()
  }

  const goDetail = (row) => {
    router.push({ path: `/order/historyDetail/${row.id}` })
  }

  onMounted(() => {
    requestListApi()
  })
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
